<script setup>
import { Search } from '@element-plus/icons-vue'
import { onMounted, ref } from 'vue'
import { getAllGroupApi } from '@/apis/taskManagement'
import { getCurrentRouteQuery } from '@/utils/routerUtils'
import { onBeforeRouteUpdate } from 'vue-router'
import { getParticipateStateByGroupIdApi, putScoreByParticipantIdApi } from '@/apis/participateState'

const groups = ref([])
const breadcrumb = ref()
const pageParam = ref({
  pageNum: 1,
  pageSize: 10,
  total: 10
})
const participantTableLoading = ref(false)
const participantTableData = ref()
const name = ref('')
const taskScoreVisible = ref(false)
const taskScore = ref()
const taskFormData = ref()

const generateBreadcrumb = groupId => {
  breadcrumb.value = [groups.value.find(group => group.id == groupId).gName, '任务总览']
}

const getParticipateStateByGroupId = groupId => {
  getParticipateStateByGroupIdApi(groupId, name.value, pageParam.value).then(({data}) => {
    participantTableData.value = data.dataList
    pageParam.value.total = data.total
  })
}

const handleCurrentChange = val => {
  pageParam.value.pageNum = val
  getParticipateStateByGroupId(getCurrentRouteQuery().groupId)
}

const putScoreByParticipantId = (score) => {
  const data = JSON.parse(JSON.stringify(taskFormData.value))
  data.taskScore = score
  putScoreByParticipantIdApi(data).then(() => {
    getParticipateStateByGroupId(getCurrentRouteQuery().groupId)
    taskScoreVisible.value = false
  })
}

onBeforeRouteUpdate(to => {
  getParticipateStateByGroupId(to.query.groupId)
  generateBreadcrumb(to.query.groupId)
})

const onGoTo = (row) => {
  // router.push(`/system/projectManagement/projectTask/projectTaskDetails?taskId=${row.id}&groupId=${row.groupId}&name=${row.name}`)
}

onMounted(() => {
  getParticipateStateByGroupId(getCurrentRouteQuery().groupId)
  getAllGroupApi().then(({data}) => {
    groups.value = data
    breadcrumb.value = [data.find(groupId => groupId.id == getCurrentRouteQuery().groupId).gName, '任务参与情况']
  })
})
</script>

<template>
  <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom: 24px">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item v-for="(b, index) in breadcrumb" :key="index">{{ b }}</el-breadcrumb-item>
  </el-breadcrumb>
  <el-row :gutter="24">
    <el-col :span="4">
      <el-input v-model="name" placeholder="请输入成员姓名进行搜索" />
    </el-col>
    <el-col :span="1.5">
      <el-button :icon="Search" type="primary" @click="getParticipateStateByGroupId(getCurrentRouteQuery().groupId)"
      >搜索
      </el-button
      >
    </el-col>
  </el-row>
  <el-table v-loading="participantTableLoading" :data="participantTableData" stripe style="width: 100%">
    <el-table-column prop="aliasName" label="中文花名" width="180" />
    <el-table-column prop="name" label="姓名" width="180" />
    <el-table-column prop="sex" label="性别" width="100" />
    <el-table-column prop="taskGroupName" label="任务所在工作组" width="180" />
    <el-table-column prop="taskName" label="任务名称" width="180" />
    <el-table-column prop="taskStatus" label="任务状态" width="100" />
    <el-table-column prop="taskRole" label="任务角色" width="120" />
    <el-table-column prop="taskRoleDescription" label="任务角色描述" width="200" />
    <el-table-column prop="taskScore" label="任务评分" width="120" />
    <el-table-column fixed="right" label="操作" width="100">
      <template #default="scope">
        <el-button :disabled="scope.row.operateAuth == 0" round type="primary"
                   @click="taskScoreVisible = true, taskScore = scope.row.taskScore, taskFormData = scope.row">评分
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
      background
      layout="prev, pager, next"
      :total="pageParam.total"
      :page-size="pageParam.pageSize"
      @current-change="handleCurrentChange"
  />
  <el-dialog v-model="taskScoreVisible" title="评分" width="24%">
    <el-form>
      <el-form-item label="评分">
        <el-select v-model="taskScore" placeholder="请选择分数">
          <el-option v-for="score in 10" :key="score" :label="score + '分'" :value="score" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="taskScoreVisible = false">取消</el-button>
        <el-button type="primary" @click="putScoreByParticipantId(taskScore)">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style lang="less" scoped>
.el-table {
  margin-top: 24px;
}
</style>
